<template>
    <div class="">

        <div class="h_input">
            <div class="h_input_label">自定义关键词</div>
            <div class="h_user_input">
                <div class="input-group width_400px">
                    <input type="text" v-model="userinputKeyword" class="form-control " placeholder="自定义关键词"
                           v-on:keyup.enter="insertGAction"/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" @click="insertGAction">添加</button>
                    </span>
                </div>
            </div>
        </div>

        <div>
            <keyword-comp :levelListData="customKeyword" @delectItem="delectItem"></keyword-comp>
        </div>

        <div>
            <!--<div class="input-group width_400px">-->
            <!--<span class="input-group-btn">-->
            <!--<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> 本栏目搜索</button>-->
            <!--</span>-->
            <!--<input type="text" class="form-control " placeholder="Username">-->
            <!--</div>-->

            <Radio-group v-model="filterLevel" type="button" class="margin_top_20" size="large" @on-change="changeTime">
                <Radio label="实时发生"></Radio>
                <Radio label="24小时"></Radio>
                <Radio label="72小时"></Radio>
                <Radio label="7天"></Radio>
                <Radio label="15天内"></Radio>
            </Radio-group>
        </div>

        <div class="row margin_top_20">
            <div class="col-md-2">
                <Dropdown trigger="click" style="margin-left: 20px" @on-click="isSwitchRemind">
                    <Button type="primary">{{Remind}}
                        <Icon type="arrow-down-b"></Icon>
                    </Button>
                    <Dropdown-menu slot="list">
                        <Dropdown-item name="on">开启提醒</Dropdown-item>
                        <Dropdown-item name="off">关闭提醒</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
            <div class="col-md-3">
                <Select v-model="model6" style="width:200px" @on-change="changeOpton">
                    <Option value="5">满足5条提醒</Option>
                    <Option value="10">满足10条提醒</Option>
                    <Option value="20">满足20条提醒</Option>
                    <Option value="50">满足50条提醒</Option>
                </Select>
            </div>
            <div class="col-md-7" style="line-height: 32px;">开启提醒服务后，当有匹配一定数量关键词的资讯时，系统将通过微信实时提醒</div>
        </div>

        <div class="margin_top_20">
            <Table :columns="columns1" :data="data1" @on-sort-change="sortChangeAction"></Table>

            <div class="page_center" v-if="articleListCount>=1">
                <Page :total=articleListCount @on-change="pageChangeAction" show-elevator></Page>
            </div>
        </div>

    </div>
</template>

<script>
    import $ from "jquery"
    import _ from "lodash"
    // 关键字
    import keywordComp from "./child/keywordComp.vue"
    // 发送ajax 请求的组件
    import getData from '../../api/getData'
    // 分页的配置信息
    import {page_config} from '../../config/config'

    var myGpointLogic = {
        // 添加我得关键词
        insertGActionLogic: function (userinput, vueObj) {
            if (userinput.trim() === '') {
                return false;
            }
            var paramObj = {
                GName: userinput.trim()
            };
            getData.post("InsertG", paramObj)
                .then(function (response) {
                    if (response.data.code === 0) {
                        vueObj.$Message.info(response.data.msg);
                        vueObj.showAllKeys();
                        vueObj.userinputKeyword = ''
                    } else {
                        vueObj.$Message.error(response.data.msg);
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
        },
    };

    export default {
        mounted: function () {
            $("#qiutiContainer").windstagball({
                radius: 120,
                speed: 10
            });
        },
        created: function () {
            this.getKeyWordContentList();
            this.showAllKeys();
        },
        data: function () {
            return {
                // 用户输入的关键字
                userinputKeyword: '',
                customKeyword: [],
                Remind: '开启提醒',
                model6: "5",
                platform: "",
                twoLevel: "",
                oneLevel: "",
                filterLevel: "",
                date: 1,
                columns1: [
                    {
                        title: '缩略图',
                        key: 'img',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('Img', {
                                    attrs: {
                                        src: params.row.Image
                                    },
                                    style: {
                                        width: '90px',
                                        height: '35px'
                                    },
                                })
                            ]);
                        }
                    },
                    {
                        title: '标题',
                        key: 'Title',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    attrs: {
                                        href: params.row.URL,
                                        target: '_blank',
                                        title: params.row.Title
                                    },
                                }, params.row.Title)
                            ]);
                        }
                    },
                    {
                        title: '类型',
                        key: 'TypeName'
                    },
                    {
                        title: '类别',
                        key: 'SCTypeName',
                        align: "center",
                    },
                    {
                        title: '来源',
                        key: 'Source',
                        align: "center"
                    },
                    {
                        title: '时间',
                        key: 'RDate',
                        sortable: true,
                        ellipsis: true,
                    },
                    {
                        title: '阅读',
                        key: 'Amout',
                        sortable: true,
                    },
                    {
                        title: '评论',
                        key: 'CommentNum',
                        sortable: true,
                    },
                    {
                        title: '收藏',
                        key: 'ISSC',
                        ellipsis: true,
                        width: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    on: {
                                        click: () => {
                                            this.markFavorite(params.row);
                                        }
                                    }
                                }, [
                                    h('Icon', {
                                        props: {
                                            type: params.row.ISSC ? 'star' : 'ios-star-outline'
                                        },
                                        style: {
                                            fontSize: '20px'
                                        }
                                    })
                                ])
                            ]);
                        }
                    }
                ],
                data1: [],
                Date: 0,
                orderType: 1,
//              1 发布时间 2评论数 3 阅读量
                orderName: 1,
                pageSize: 5,
                // 当前页面数
                currentPage: 1,
                // 列表的总数据数
                articleListCount: 0
            }
        },
        methods: {
//        添加我得关键词
            insertGAction: function () {
                myGpointLogic.insertGActionLogic(this.userinputKeyword, this);
            },
            // 是否开启提醒
            isSwitchRemind: function (state) {
                var self = this;
                self.Remind = state === 'on' ? '开启提醒' : '关闭提醒';
                var type = state === 'on' ? '1' : '2';
                getData.post("Remind", {Type: type,RemindNum:self.model6})
                    .then(function (response) {
                        if (response.data.code === 0) {
                            self.$Message.info(response.data.msg)
                        } else {
                            self.$Message.error(response.data.msg)
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });


            },
            // 分页触发的事件
            pageChangeAction: function (currentPage) {
                this.currentPage = currentPage;
                this.getKeyWordContentList({
                    Date: this.Date,
                    pageSize: this.pageSize,
                    currentPage: this.currentPage
                })
            },
            delectItem: function (data) {
                var self = this;
                getData.post("DeleteG", {GKSWID: data})
                    .then(function (response) {
                        if (response.data.code === 0) {
                            self.$Message.info(response.data.msg)
                            self.showAllKeys();
                        } else {
                            self.$Message.error(response.data.msg)
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
            },
            // 查询我得关键词内容
            getKeyWordContentList: function () {
                var self = this;
                var paramObj = {
                    Date: self.Date,
                    orderType: self.orderType,
                    orderName: self.orderName,
                    pageSize: self.pageSize,
                    pageIndex: self.currentPage
                };
                getData.post("GetData", paramObj)
                    .then(function (response) {
                        if (response.data.code === 0) {
                            self.data1 = response.data.data;
                            self.articleListCount = response.data.PageCount;
                        } else {
                            this.$Message.error(response.data.msg)
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
            },
//            收藏与取消收藏
            markFavorite: function (param) {
                console.log(param)
                var self = this;
                var url = param.ISSC ? 'GKeyWordNSC' : 'GKeyWordSC';
                console.log(url);

                getData.post(url, {MCTID: param.ID})
                    .then(function (response) {
                        var data = response.data;
                        if (data.code == 0) {
                            self.$Message.info(data.msg);
                            param.ISSC = param.ISSC ? 0 : 1;
                        } else {
                            self.$Message.error(data.msg ? data.msg : '网络错误，请稍后重试');
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
            },
//            选择时间
            changeTime: function (data) {
                switch (data) {
                    case '实时发生':
                    case '24小时':
                        this.Date = 1;
                        break;
                    case '72小时':
                        this.Date = 3;
                        break;
                    case '7天':
                        this.Date = 7;
                        break;
                    case '15天内':
                        this.Date = 15;
                        break;
                }
                this.getKeyWordContentList({
                    Date: this.Date,
                    pageSize: this.pageSize,
                    currentPage: this.currentPage
                })
            },
            //获取全部的关键字
            showAllKeys: function () {
                var self = this;
                getData.post("GetGKeys")
                    .then(function (response) {
                        if (response.data.code === 0) {
                            self.customKeyword = response.data.data;
                        } else {
                            vueObj.$Message.error(response.data.msg);
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
            },
            sortChangeAction: function (sortJson) {
                var order = sortJson.order;
                var key = sortJson.key;
                console.log(sortJson.key)

                if (key == "RDate") {
                    this.orderName = 1;
                }
                if (key == "Amout") {
                    this.orderName = 3;
                }
                if (key == "CommentNum") {
                    this.orderName = 2;
                }
                if (order == "desc") {
                    this.order = 1;
                } else {
                    this.order = 2;
                }
                this.getKeyWordContentList();
            },
//            改变提醒条数
            changeOpton:function (data) {
                this.model6 = data;
            }
        },
        components: {
            keywordComp
        }
    }
</script>

<style>
    #qiutiContainer.qiuti-label {
        position: relative;
        width: 350px;
        height: 350px;
        border: 1px solid #000;
        margin: 20px auto 0;
    }

    #qiutiContainer.qiuti-label a {
        position: absolute;
        top: 0px;
        left: 0px;
        font-family: Microsoft YaHei;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        padding: 3px 6px;
    }

    #qiutiContainer.qiuti-label a:hover {
        border: 1px solid #eee;
        background: #FFF;
    }

    #qiutiContainer.qiuti-label .blue {
        color: blue;
    }

    #qiutiContainer.qiuti-label .red {
        color: red;
    }

    #qiutiContainer.qiuti-label .green {
        color: green;
    }
</style>
